<template>
    <div class="conson">
        <!-- 头部部分 -->
            <van-nav-bar class="header">
                <i slot="left" class="iconfont iconzuojiantou" @click="$router.go(-1)"></i>
                <p slot="title" class="title">猜你喜欢</p>
                <i slot="right" class="iconfont iconshezhi"></i>
            </van-nav-bar>
            <!-- 内容区域 -->
            <div class="main">
                <!-- 图片区域 -->
                <van-grid :border="false" :column-num="2" class="ul-case">  
                   <!-- 列表项 -->
                    <van-grid-item v-for="item in $store.state.xihuang" :key="item.id">
                        <!-- 图片部分 -->
                        <van-image                             
                                :src="item.img" 
                                class="iamge"      
                                fit="cover"                              
                        />
                        <!-- 文字部分 -->
                        <van-cell-group class="wenzi">
                            <van-cell>    
                                <h3 slot="title" class="case-title">{{item.title}}</h3>
                                <p slot="label" class="case-label">{{item.desc}}</p>
                            </van-cell>                   
                        </van-cell-group>
                    </van-grid-item>               
                </van-grid>
                <!-- 评论区域 -->
                <div class="pinlun">
                    <div class="lun-title">
                        <van-nav-bar>
                            <h3 slot="title" class="pinlun-title">评论</h3>
                            <i slot="right" class="iconfont iconShape1"></i>
                        </van-nav-bar>
                    </div>
                    <!-- 品论内容部分 -->
                    <div class="content" v-for="item in $store.state.xipin" :key="item.id">
                        <div class="user-logo">
                            <van-image    
                            fit="cover" 
                            round                        
                                    :src="item.img" 
                                    class="user-image"                                    
                            />
                            <div class="user-miaoshu">
                                <h3>{{item.name}}</h3>
                                <p>{{item.data}}</p>
                            </div>
                        </div>
                        <div class="pinlun-info">
                            <h3>{{item.desc}}</h3>
                        </div>
                    </div>                                 
                </div>
            </div>
    </div>
</template>
<style lang="less">
.conson{
    // 头部下划线
    .van-hairline--bottom::after{
        border: none;
    }
    // 头部部分
    .header{       
        margin-bottom: 25px; 
        .iconzuojiantou{
                font-size: 40px;
                color: #535353;
                padding-left: 18px;
        }
        .title{
            font-size: 32px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #484747;
        }
        .iconshezhi{
            font-size: 40px;
            color: #535353;
            padding-right: 18px;
        }
    }
    .main{
        padding: 0px 50px;
        .ul-case{
            .iamge{
               width: 308px;
               height: 172px;
               img{
                   border-radius: 20px;
               }
            }
            // 盒子内填充
            .van-grid-item__content{
                padding: 0px 0px 49px;
            }
            // 下划线
            .van-hairline--top-bottom::after, .van-hairline-unset--top-bottom::after{
                border: none;
            }
            .wenzi{
                text-align: left;
                 width: 100%;
                .van-cell{                 
                    padding: 0px 11px;   
                }          
                .van-cell__label{
                    margin: 0px;
                }   
                // 文字部分
                .case-title{
                    font-size: 24px;
                    font-weight: normal;
                    font-stretch: normal;
                    letter-spacing: 0px;
                    color: #484747;
                    height: 24px;
                    line-height: 24px;
                    margin: 18px 0px 11px;
                }
                .case-label{
                    font-size: 20px;
                    font-weight: normal;
                    font-stretch: normal;
                    letter-spacing: 0px;
                    color: #9b9b9b;
                     height: 20px;
                    line-height: 20px;
                }
            }
           
        }
        // 品论区域
        .pinlun{
                text-align: left;
                // 顶部部分
                .lun-title{
                    .pinlun-title{
                        font-size: 32px;
                        font-weight: normal;
                        font-stretch: normal;
                        letter-spacing: 0px;
                        color: #5a5a5b;
                    }
                    .iconShape1{
                        font-size: 40px;
                        color: #272636;
                    }
                }
                .content{
                    margin-bottom: 36px;
                }
              .user-logo{
                display: flex;
                flex-direction: row;
                align-items: flex-end;
                margin-bottom: 17px;
                .user-image{
                    width: 60px;
                    height: 60px;
                    display: block;
                    margin-right: 19px;
                }
                .user-miaoshu{
                    h3{
                        font-size: 22px;
                        font-weight: normal;
                        font-stretch: normal;
                        letter-spacing: 0px;
                        color: #5a5a5b;
                    }
                    p{
                        font-size: 18px;
                        font-weight: normal;
                        font-stretch: normal;
                        letter-spacing: 0px;
                        color: #9b9b9b;
                    }
                }
            }
            // 评论部分
            .pinlun-info{
                padding-left: 78px;
                h3{
                    font-size: 20px;
                    font-weight: normal;
                    font-stretch: normal;
                    letter-spacing: 0px;
                    color: #4a4a4a;
                }
            }
        }
    }
}
</style>
<script>
import { mapActions } from 'vuex'
export default {
    methods:{
        ...mapActions(['getlxihuang','getlxipin'])
    },
    created(){
        this.getlxihuang()
        this.getlxipin()
    }
}
</script>
